<template>
    <div class="detail-wrapper">
      <div class="invite-title"><a href="javascript:;" @click="returnHref"><img src="../../assets/img/return.png"></a><p>玩家信息</p></div>
      <div class="line"></div>
      <div class="detail-content">
        <ul>
          <li><label>UID：</label><p>{{userInfo.userId}}</p></li>
          <li class="detail-avatar"><label>头像：</label><div><img :src="userInfo.headimgurl"></div></li>
          <li><label>昵称：</label><p>{{userInfo.nickname}}</p></li>
          <li><label>当前角色：</label><p v-text="userInfo.isAgent?'代理':'玩家'"></p></li>
          <li><label>上级ID：</label><p>{{userInfo.parentId}}</p></li>
          <li><label>创建时间：</label><p>{{userInfo.registerTime}}</p></li>
          <li><label>状态：</label><p v-text="userInfo.enabled == '0'?'已被禁用':'正常'"></p></li>
        </ul>
        <div class="detail-btn" v-if="!userInfo.isAgent">
          <el-button type="primary" :loading="loading" @click="setAgent" class="detail-submit">授权为下级代理</el-button>
          <el-button type="primary" class="detail-submit detail-cancel" @click="returnHref">取消</el-button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "agent-detail",
      data(){
          return{
            avatar:'/static/images/timg.jpg',
            userInfo:{},
            loading:false
          }
      },
      created(){
        let detailId = sessionStorage.getItem('agentDetail')
        this.getDetail(detailId)
      },
      methods:{
        returnHref(){
          this.$router.go(-1)
        },
        setAgent(){
          this.loading = true
          if (confirm("确认授权为代理吗？")){
            this.$axios.patch('/user/'+this.userInfo.userId+'/to-agent',{},this.global().token).then((res)=>{
              if(res.status == 200){
                this.loading = false
                this.$message({message: '授权成功', type: 'success',duration:1200});
                let detailId = sessionStorage.getItem('agentDetail')
                this.getDetail(detailId)
              }else{
                this.$message({message: res.data, type: 'error',duration:1200});
                this.loading = false
              }
            })
          }else{
            this.loading = false
          }

        },
        getDetail(detailId){
          this.$axios.get('/'+detailId+'/profiles',{},this.global().token).then((res)=>{
              if(res.status == 200){
                let user = new Object()
                let data = res.data
                data.forEach((val)=>{let str = "user."+val.key+"='"+val.value+"'";eval(str);})
                if (!(user.registerat== '0' || user.registerat == '')){
                  user.registerTime = this.changeDate(user.registerat)
                }
                if(user.isAgent == 'true'){user.isAgent = true} else{user.isAgent = false}
                if(!user.headimgurl){user.headimgurl = this.avatar}
                this.userInfo = user
              }
          })
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import "../../assets/css/title.styl"
  /*.detail-wrapper*/
    /*width: 100%*/
    /*height:100%*/
    /*background: #f4f4f4*/
  .detail-content
    background: #fff
    padding:0 .1rem
    &>ul>li
      line-height:.5rem
      border-bottom .01rem solid #f1f1f1
      display flex
      justify-content space-between
      &>label
        flex 0 0 1rem
        font-size:.15rem
        color:#333
      &>p
        flex 1
        text-align right
        font-size:.15rem
        color:#909399
    .detail-avatar
      height .8rem
      line-height:.8rem
      &>div
        width:.7rem
        height:.7rem
        float right
        &>img
          position relative
          top -.05rem
          width:100%
          height:100%
    .detail-btn
      display flex
      margin:.3rem 0
      justify-content center
      .detail-submit
        flex 0 0 1.2rem
        display block
        border:none
        padding: 0
        background: #0571de
        border-radius:.05rem
        line-height:.34rem
        text-align center
        font-size:.14rem
        margin-right:.15rem
        color:#fff
      .detail-cancel
        flex 0 0 .6rem
        background: #909399
</style>
